<template>
	<div class="float-container bg-color shadowColor br4 border-normal" :style="`left:${left};top:${top};right:${right}`">
		<div v-drag class="border-active df cursor_move u_s_none">
			<div class="float-title-container">
				<span class="float-title-icon" :style="'backgroundImage: url(' + logo + ')'" />
				<h3>{{ title }}</h3>
			</div>
			<span class="float-title-closeBtn">
				<el-tooltip content="关闭" placement="top" effect="light">
					<el-button class="float-title-closeIcon" type="text" size="medium" icon="el-icon-close" @click.stop="$emit('close')" />
				</el-tooltip>
			</span>
		</div>
		<div class="float-content border-active">
			<slot />
		</div>
	</div>
</template>

<script>
export default {
	name: 'FloatContainer',
	components: {},
	directives: {
		drag(el, bindings, vnode) {
			el.onmousedown = function (e, bindings, vnode) {
				let ndoe = e.currentTarget.parentNode
				let disx = e.pageX - ndoe.offsetLeft
				let disy = e.pageY - ndoe.offsetTop
				document.onmousemove = function (e) {
					ndoe.style.left = e.pageX - disx + 'px'
					ndoe.style.right = ''
					ndoe.style.top = e.pageY - disy + 'px'
				}
				document.onmouseup = function () {
					document.onmousemove = document.onmouseup = null
				}
			}
		}
	},
	props: {
		title: {
			type: String,
			required: true
		},
		logo: {
			type: String,
			required: true
		},
		left: {
			type: String,
			required: false,
			default: '75px'
		},
		right: {
			type: String,
			required: false
		},
		top: {
			type: String,
			required: false,
			default: '156px'
		}
	},
	methods: {
		closeBtnHandler() {
			// this.$emit('controlContentShow');
		}
	}
}
</script>

<style lang="scss" scoped>
.float-container {
	height: auto;
	min-width: 15%;
	position: absolute;
	padding: 0.6vw;
	z-index: 12;
	.float-title-container {
		display: flex;
		align-items: center;
		height: 100%;
		h3 {
			display: inline-block;
			color: #39c2da;
			margin: 0;
			font-size: 1vw;
		}
		.float-title-icon {
			display: inline-block;
			width: 2vw;
			height: 2vw;
			background: transparent;
			border: 0;
			background-size: 100% 100%;
			background-repeat: 'no-repeat';
		}
	}
	.float-title-closeBtn {
		float: right;
		margin-right: 0.5vw;
		.el-button {
			background-color: unset;
			font-size: 0.8vw;
		}
		.el-button:hover {
			border: unset;
			box-shadow: unset;
		}
	}
	.float-title-closeBtn >>> .el-button-group .el-button--medium {
		font-size: 1vw;
	}

	.float-content {
		margin-top: 10px;
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
}
</style>
